<template>
	<view style="height: 100vh;">
		<cu-custom :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">快捷登录</block>
		</cu-custom>
		<view class="flex justify-between align-center" style="flex-direction: column;height: 76%;width: 100%;">
			<view class="flex justify-start align-center" style="flex-direction: column;width: 100%;">
				<view style="width: 100%;height: 160upx;"></view>
				<view class="padding-bottom">
					<image src="../../static/images/setting/logo.png" class="radius"
						style="width: 200upx;height: 200upx;">
					</image>
				</view>
				<text class="text-grey text-df padding-bottom-xl">{{appIntroduce}}</text>

				<!-- #ifdef H5 || MP-QQ || MP-BAIDU -->
				<view class="flex justify-start align-center" style="flex-direction: column;width: 100%;">
					<view class="flex justify-start align-start bg-gray radius margin padding-sm"
						style="flex-direction: column;width: 80%;">
						<view class="flex justify-start align-center" style="width: 100%;">
							<text class="cuIcon-mobile padding-left-sm padding-right-sm"></text>
							<input v-model="mobile" class="bg-white padding-left-sm text-df" placeholder="填写手机号"
								style="height: 66upx;width: 100%;" />
						</view>
						<view style="height: 25upx;"></view>
						<view class="flex justify-start align-center" style="width: 100%;">
							<text class="cuIcon-info padding-left-sm padding-right-sm"></text>
							<input v-model="code" class="bg-white padding-left-sm text-df" placeholder="填写验证码"
								style="height: 66upx;width: 100%;" />
							<view v-if="showText==true" @tap="sendSmsAction"
								class="bg-gradual-blue solid-left padding-left padding-right-sm radius-top-right radius-bottom-right text-center flex justify-center align-center"
								style="height: 66upx;">
								<text class="text-df" style="min-width: 180upx;">发送验证码</text>
							</view>
							<view v-else
								class="bg-gradual-gray solid-left padding-left padding-right-sm radius-top-right radius-bottom-right text-center flex justify-center align-center"
								style="height: 66upx;">
								<text class="text-df" style="min-width: 180upx;">({{second}})重新发送</text>
							</view>
						</view>
					</view>
					<view class="flex justify-center align-center" style="width: 100%;">
						<button @tap="smsLoginAction" class="cu-btn bg-green" style="width: 35%;">立即登录</button>
					</view>
				</view>
				<!-- #endif -->
			</view>
			<view class="flex justify-start align-center" style="flex-direction: column;width: 100%;">
				<!-- #ifdef MP-WEIXIN -->
				<button @getphonenumber="getPhoneNumberSuccess" open-type="getPhoneNumber"
					class="cu-btn bg-green shadow-blur lg padding-bottom" style="width: 70%;">
					<text class="cuIcon-weixin lg padding-right-sm"></text>微信授权登录
				</button>
				<!-- #endif -->
				<view class="flex justify-center align-center padding-top">
					<text class="cuIcon-roundcheckfill text-sm text-green padding-right-xs"></text>
					<text class="text-black text-sm padding-right-xs">登录即表示已并同意</text>
					<view class="action" @tap="jumpProtocol">
						<text class="text-green text-sm">用户协议</text>
					</view>
				</view>
				<view style="height: 40upx;"></view>
			</view>
		</view>
		<view class="cu-tabbar-height"></view>
		<Footer :needContact="false" class="footer"></Footer>
	</view>
</template>

<script>
	import {
		login,
		updateWxUserInfo,
		decryptPhoneNumber,
		miniSendLoginSms,
		miniSmsLogin,
		baiduLogin
	} from '@/api/api.js'
	import {
		wxLogin
	} from '@/api/auth.js'
	import {
		setToken,
		getToken,
		setUserInfo,
		removeToken,
		setUserInfoTimestamp
	} from '@/api/auth.js'
	import Footer from '@/components/Footer.vue'
	import config from '@/api/config.js'
	export default {
		components: {
			Footer,
		},
		data() {
			return {
				interval: null,
				showText: true,
				second: 60,
				mobile: '',
				code: '',
				windowWidth: 320,
				windowHeight: 568,
			}
		},
		onLoad() {
			let _this = this
			uni.getSystemInfo({
				success(res) {
					console.log('window info:' + JSON.stringify(res))
					_this.windowWidth = res.windowWidth
					_this.windowHeight = res.windowHeight
				}
			})
			uni.$on('UserLoginSuccess',function(){
				uni.navigateBack({
					delta:1
				})
			})
		},
		computed: {
			gapHeight() {
				return 350 * (this.windowHeight / 568)
			},
			appIntroduce() {
				return config.appIntroduce
			}
		},
		onHide() {
			clearInterval(this.interval)
		},
		methods: {
			smsLoginAction() {
				uni.showLoading({
					title: '正在登录...'
				})
				miniSmsLogin(this.mobile, this.code).then(resInfo => {
					uni.hideLoading()
					//保存Token信息
					setToken(resInfo.data)
					//保存用户信息
					setUserInfo(resInfo.data)
					uni.$emit('UserLoginSuccess')
					if (resInfo.data.first_edit_done == 1) {
						const eventChannel = this.getOpenerEventChannel()
						eventChannel.emit('loginSuccess', resInfo.data);
						uni.navigateBack({
							delta: 1
						})
					} else {
						uni.navigateTo({
							url: '/pages/register-user-info/register-user-info',
							success: function(passRes) {
								// 通过eventChannel向被打开页面传送数据
								passRes.eventChannel.emit('loginUserInfo', resInfo.data)
							}
						})
					}
				}).catch(error => {
					uni.hideLoading()
				})
			},
			startCountResend() {
				var that = this;
				this.interval = setInterval(() => {
					that.showText = false;
					var times = that.second - 1;
					//that.second = times<10?'0'+times:times ;//小于10秒补 0
					that.second = times;
				}, 1000);
				setTimeout(() => {
					clearInterval(this.interval);
					this.interval = null
					that.second = 60;
					that.showText = true;
				}, 60000);
			},
			sendSmsAction() {
				if (this.mobile.length == 0) {
					uni.showToast({
						icon: 'none',
						title: '请填写手机号'
					})
					return
				}
				uni.showLoading({
					title: '正在发送...'
				})
				// #ifndef MP-BAIDU
				miniSendLoginSms(this.mobile).then(res => {
					uni.hideLoading()
					uni.showToast({
						title: '发送成功'
					})
					this.startCountResend()
				}).catch(error => {
					uni.hideLoading()
				})
				// #endif
				// #ifdef MP-BAIDU
				swan.getLoginCode({
					success: res => {
						console.log('getLoginCode success', res);
						baiduLogin(res.code, this.mobile).then(serverRes => {
							uni.hideLoading()
							setToken(serverRes.data)
							uni.showToast({
								title: '发送成功'
							})
							this.startCountResend()
						}).catch(error => {
							uni.hideLoading()
						})
					},
					fail: err => {
						console.log('getLoginCode fail', err);
						uni.hideLoading()
						uni.showToast({
							icon: 'none',
							title: '获取登录凭证失败!'
						})
					}
				});
				// #endif
			},
			realLoginWithPhoneNumberInfo(res) {
				decryptPhoneNumber(res.detail.iv, res.detail.encryptedData).then(resInfo => {
					console.log(res)
					uni.hideLoading()
					uni.showToast({
						title: '登录成功'
					})
					//目前手机登录后都会返回登录态，需要覆盖
					setToken(resInfo.data)
					setUserInfo(resInfo.data)
					uni.$emit('UserLoginSuccess')
					if (resInfo.data.first_edit_done == 1) {
						const eventChannel = this.getOpenerEventChannel()
						eventChannel.emit('loginSuccess', resInfo.data);
					} else {
						uni.navigateTo({
							url: '/pages/register-user-info/register-user-info',
							success: function(passRes) {
								// 通过eventChannel向被打开页面传送数据
								passRes.eventChannel.emit('loginUserInfo', resInfo.data)
							}
						})
					}
				}).catch(error => {
					uni.hideLoading()
				})
			},
			getPhoneNumberSuccess(phoneRes) {
				console.log(phoneRes)
				uni.showLoading({
					title: '正在登录...'
				})
				let token = getToken()
				console.log(token)
				if (token === null || token === undefined || token.length == 0) {
					console.log('no token start wx login!')
					let that = this
					uni.login({
						provider: 'weixin',
						success: function(res) {
							console.log('wxlogin:' + JSON.stringify(res))
							let errMsg = res.errMsg
							let code = res.code
							let _that = that
							if (errMsg == 'login:ok' && code !== null && code !== '') {
								login(code).then(result => {
									setToken(result.data)
									_that.realLoginWithPhoneNumberInfo(phoneRes)
								}).catch(error => {
									uni.hideLoading()
								})
							}
						},
						fail(error) {
							console.log('uni login fail:' + error)
							uni.hideLoading()
						}
					})
				} else {
					console.log('token exist , just login!')
					this.realLoginWithPhoneNumberInfo(phoneRes)
				}
			},
			jumpProtocol() {
				uni.navigateTo({
					url: '/pages/lessuse/protocol/protocol'
				})
			}
		},
	}
</script>

<style scoped>

</style>
